{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- 欢迎区域 -->
    <div class="text-center py-12">
        <div class="gradient-bg rounded-2xl p-8 text-white">
            <i class="fas fa-puzzle-piece text-6xl mb-4"></i>
            <h1 class="text-4xl font-bold mb-4">欢迎使用FastAPI插件系统</h1>
            <p class="text-xl opacity-90 mb-6">一个现代化、可扩展的插件管理系统</p>
            <div class="flex justify-center space-x-4">
                <a href="/plugins" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                    <i class="fas fa-plug mr-2"></i>管理插件
                </a>
                <a href="/docs" class="bg-white bg-opacity-20 text-white px-6 py-3 rounded-lg font-semibold hover:bg-opacity-30 transition-colors">
                    <i class="fas fa-book mr-2"></i>查看文档
                </a>
            </div>
        </div>
    </div>

    <!-- 功能特性 -->
    <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md p-6 card-hover">
            <div class="text-center">
                <i class="fas fa-bolt text-4xl text-blue-500 mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">高性能</h3>
                <p class="text-gray-600">基于FastAPI构建，提供异步处理和优秀的性能表现</p>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6 card-hover">
            <div class="text-center">
                <i class="fas fa-puzzle-piece text-4xl text-green-500 mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">可扩展</h3>
                <p class="text-gray-600">支持动态加载、卸载和热重载插件，无需重启服务</p>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6 card-hover">
            <div class="text-center">
                <i class="fas fa-shield-alt text-4xl text-purple-500 mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">安全可靠</h3>
                <p class="text-gray-600">内置安全机制，支持插件隔离和权限控制</p>
            </div>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800">
            <i class="fas fa-rocket mr-2 text-blue-500"></i>快速操作
        </h2>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            <button onclick="loadPlugins()" class="bg-blue-500 hover:bg-blue-600 text-white p-4 rounded-lg transition-colors">
                <i class="fas fa-sync-alt text-2xl mb-2"></i>
                <div class="font-semibold">刷新插件</div>
                <div class="text-sm opacity-90">重新加载所有插件</div>
            </button>
            
            <button onclick="startAllPlugins()" class="bg-green-500 hover:bg-green-600 text-white p-4 rounded-lg transition-colors">
                <i class="fas fa-play text-2xl mb-2"></i>
                <div class="font-semibold">启动所有</div>
                <div class="text-sm opacity-90">启动所有已加载的插件</div>
            </button>
            
            <button onclick="stopAllPlugins()" class="bg-red-500 hover:bg-red-600 text-white p-4 rounded-lg transition-colors">
                <i class="fas fa-stop text-2xl mb-2"></i>
                <div class="font-semibold">停止所有</div>
                <div class="text-sm opacity-90">停止所有运行中的插件</div>
            </button>
            
            <a href="/dashboard" class="bg-purple-500 hover:bg-purple-600 text-white p-4 rounded-lg transition-colors text-center">
                <i class="fas fa-tachometer-alt text-2xl mb-2"></i>
                <div class="font-semibold">系统监控</div>
                <div class="text-sm opacity-90">查看系统状态和性能</div>
            </a>
        </div>
    </div>

    <!-- 系统信息 -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800">
            <i class="fas fa-info-circle mr-2 text-blue-500"></i>系统信息
        </h2>
        
        <div class="grid md:grid-cols-2 gap-6">
            <div>
                <h3 class="text-lg font-semibold mb-4 text-gray-700">技术栈</h3>
                <ul class="space-y-2 text-gray-600">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>FastAPI - 现代Python Web框架</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Uvicorn - ASGI服务器</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Pydantic - 数据验证</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Jinja2 - 模板引擎</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Tailwind CSS - 样式框架</li>
                </ul>
            </div>
            
            <div>
                <h3 class="text-lg font-semibold mb-4 text-gray-700">主要功能</h3>
                <ul class="space-y-2 text-gray-600">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>动态插件加载</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>插件生命周期管理</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>RESTful API接口</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Web管理界面</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>插件配置管理</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    async function loadPlugins() {
        try {
            showNotification('正在刷新插件...', 'info');
            setTimeout(() => {
                showNotification('插件刷新完成', 'success');
            }, 1000);
        } catch (error) {
            showNotification('插件刷新失败', 'error');
        }
    }
    
    async function startAllPlugins() {
        try {
            showNotification('正在启动所有插件...', 'info');
            setTimeout(() => {
                showNotification('所有插件启动完成', 'success');
            }, 1000);
        } catch (error) {
            showNotification('插件启动失败', 'error');
        }
    }
    
    async function stopAllPlugins() {
        try {
            showNotification('正在停止所有插件...', 'info');
            setTimeout(() => {
                showNotification('所有插件停止完成', 'success');
            }, 1000);
        } catch (error) {
            showNotification('插件停止失败', 'error');
        }
    }
</script>
{% endblock %} 